<script setup lang="ts">
import { ref } from 'vue';
import {useRouter} from 'vue-router';

const ipt=ref('')

const router=useRouter()
const toSearch=()=>{
  if(ipt.value===''){
    alert('查什么')
    return
  }
  // 直接写地址
  // router.push('/search')
  // 传入对象，分别设置不同的值
  // router.push({
  //   path:'/search'
  // })

  //如果地址较长，可以考虑用name属性 
  // router.push({
  //   name:'/search'
  // })

  // 查询参数传递 ?key=value&key2=value2
  // 要么手动拼接URL ，要么query自动拼接（推荐）
  // 适合参数不确定个数的时候使用
  // URL没有那么高级
  // router.push({
  //   path:'/search',
  //   query:{
  //     name:'jakc',
  //     age:18，
        // ipt:ipt.value
  //   }

  // 动态路由传参
  // name 和路由的name属性匹配
  // params中的key和注册的参数名匹配
  // 参数个数是固定的，常用于1个参数   
  // 使用时路由必须要改设置（path）
  router.push({
    name:'/search',
    params:{
      words:'ipt.value'
    }
    
  })

}
</script>

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="ipt" type="text">
      <button @click="toSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/前端培训">前端培训</router-link> 
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
      <!-- 查询参数的方式进行数据传递 -->
      <!-- <router-link to="/search?key=前端培训">前端培训</router-link> 
      <router-link to="/search?key=黑马程序员">黑马程序员</router-link>
      <router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link> -->
    </div>
  </div>
</template>

<style scoped>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}

.search-box {
  display: flex;
  justify-content: center;
}

.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-box input:focus {
  border: 2px solid #ad2a26;
}

.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}

.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}

.hot-link a {
  margin: 0 5px;
}
</style>